<template>
  <div class="container">
    <el-card>
      <el-row type="flex" justify="space-between" align="middle">
        <el-col :span="20">
          <el-row :gutter="20">
            <span>学科名称</span>
            <el-input v-model="pageCont.subjectName" style="width: 240px; margin: 0 10px"></el-input>
            <el-button @click="pageCont.subjectName = ''">清除</el-button>
            <el-button type="primary" @click="getSbjList">搜索</el-button>
          </el-row>
        </el-col>
        <el-col :span="4">
          <el-row type="flex" justify="end">
            <el-button type="success" icon="el-icon-edit" @click="isShowAdd=true">新增学科</el-button>
            <sbjAdd v-if="isShowAdd" :dialogVisible.sync="isShowAdd" :subjectCont="editSubjectCont" @close="addClose" @addSubject="addSubject" @editSbj="editSbj"/>
          </el-row>
        </el-col>
      </el-row>
      <el-alert show-icon :title="`数据一共${total}条`" type="info" :closable="false" style="margin: 10px 0"> </el-alert>
      <sbjTables :tableData="searchSubjectList" :tableCont="sbjTableCont" @edit="editSubject" @del="delSubject"></sbjTables>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageCont.pagesize"
        layout="prev, pager, next, sizes, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import sbjTables from '../components/subjects-table.vue'
import sbjAdd from '../components/subjects-add.vue'
import { list, add, remove, update } from '@/api/hmmm/subjects.js'
export default {
  components: {
    sbjTables,
    sbjAdd
  },
  data () {
    return {
      sbjTableCont: [
        { id: 1, lable: '学科名称', prop: 'subjectName' },
        { id: 2, lable: '创建者', prop: 'username' },
        { id: 3, lable: '创建日期', prop: 'addDate' },
        { id: 4, lable: '前台是否显示', prop: 'isFrontDisplay' },
        { id: 5, lable: '二级目录', prop: 'twoLevelDirectory' },
        { id: 6, lable: '标签', prop: 'tags' },
        { id: 7, lable: '题目数量', prop: 'totals' }
      ],
      pageCont: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      total: 0,
      subjectList: [],
      searchSubjectList: [],
      currentPage: 1,
      isShowAdd: false,
      editSubjectCont: {
        subjectName: '',
        isFrontDisplay: false
      }
    }
  },
  created () {
    this.getSbjList()
  },
  methods: {
    handleSizeChange (val) {
      this.pageCont.pagesize = val
      this.getSbjList()
    },
    handleCurrentChange (val) {
      this.pageCont.page = val
      this.getSbjList()
    },
    // 获取数据 渲染页面 搜索学科
    async getSbjList () {
      const { data } = await list(this.pageCont)
      data.items.map(item => {
        item.isFrontDisplay = item.isFrontDisplay === 1 ? '是' : '否'
        item.addDate = this.dayjs(item.addDate).format('YYYY-MM-DD HH:mm:ss')
      })
      this.subjectList = data.items
      this.searchSubjectList = data.items
      this.total = data.counts
    },
    // 关闭弹窗
    addClose () {
      this.isShowAdd = false
      this.editSubjectCont = {
        subjectName: '',
        isFrontDisplay: false
      }
    },
    // 添加学科
    async addSubject (data) {
      await add(data)
      this.getSbjList()
    },
    // 删除学科
    async delSubject (val) {
      if ((this.total - 1) % this.pageCont.pagesize === 0 && this.pageCont.page > 1) {
        this.pageCont.page -= 1
      }
      await remove(val)
      this.getSbjList()
    },
    // 编辑学科
    editSubject (val) {
      console.log(val)
      this.editSubjectCont = val
      this.getSbjList()
      this.isShowAdd = true
    },
    async editSbj (val) {
      const data = { id: val.id, subjectName: val.subjectName, isFrontDisplay: val.isFrontDisplay }
      try {
        await update(data)
        this.$message.success('学科修改成功')
        this.getSbjList()
      } catch (error) {
        this.$message.error(error)
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  margin: 10px;
  .el-card {
    padding:0 20px 30px;
    position: relative;
    span {
      font-size: 16px;
      color: #606266;
      font-weight: bold;
    }
    .el-pagination {
      margin-top: 10px;
      margin-bottom: 10px;
      position: absolute;
      bottom: 0;
      right: 30px;
    }
  }
}
</style>
